import React from 'react';
import { Typography, Card, Row, Col, Statistic, List, Tag, Button, Space } from 'antd';
import { 
  UserOutlined, 
  FileTextOutlined, 
  CommentOutlined, 
  FireOutlined,
  ClockCircleOutlined,
  LikeOutlined,
  StarOutlined,
  ReadOutlined
} from '@ant-design/icons';
import { Link } from 'react-router-dom';
import { useUser } from '../contexts/UserContext';

const { Title, Paragraph } = Typography;

// 热门文章数据
const hotArticles = [
  {
    id: '1',
    title: 'React 18新特性详解',
    author: 'Admin',
    tags: ['React', '前端'],
    likes: 128,
    comments: 32
  },
  {
    id: '2',
    title: 'TypeScript最佳实践',
    author: 'Admin',
    tags: ['TypeScript', '教程'],
    likes: 98,
    comments: 25
  },
  {
    id: '3',
    title: 'React性能优化技巧',
    author: 'Admin',
    tags: ['React', '性能优化'],
    likes: 156,
    comments: 45
  }
];

// 最新动态数据
const recentActivities = [
  {
    type: 'article',
    content: '发布了新文章《React Router v6完全指南》',
    time: '10分钟前'
  },
  {
    type: 'comment',
    content: '评论了文章《TypeScript最佳实践》',
    time: '30分钟前'
  },
  {
    type: 'like',
    content: '点赞了文章《React性能优化技巧》',
    time: '1小时前'
  }
];

const Home: React.FC = () => {
  const { user } = useUser();

  return (
    <div>
      {/* 欢迎区域 */}
      <Card style={{ marginBottom: 24, background: '#f0f5ff', border: 'none' }}>
        <Title level={2}>
          {user ? `欢迎回来, ${user.username}！` : '欢迎来到 React 博客'}
        </Title>
        <Paragraph>
          这是一个使用 React + TypeScript + Ant Design 开发的博客系统，
          展示了React开发中的各种最佳实践和进阶技巧。
        </Paragraph>
        {!user && (
          <Space>
            <Button type="primary" size="large">
              <Link to="/register">立即注册</Link>
            </Button>
            <Button size="large">
              <Link to="/login">登录</Link>
            </Button>
          </Space>
        )}
      </Card>

      {/* 统计数据 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card>
            <Statistic 
              title="文章数" 
              value={256} 
              prefix={<FileTextOutlined />} 
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic 
              title="用户数" 
              value={128} 
              prefix={<UserOutlined />}
              valueStyle={{ color: '#cf1322' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic 
              title="评论数" 
              value={512} 
              prefix={<CommentOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic 
              title="今日访问" 
              value={1024} 
              prefix={<FireOutlined />}
              valueStyle={{ color: '#faad14' }}
            />
          </Card>
        </Col>
      </Row>

      {/* 主要内容区 */}
      <Row gutter={24}>
        {/* 左侧热门文章 */}
        <Col span={16}>
          <Card 
            title={<><FireOutlined /> 热门文章</>}
            extra={<Link to="/articles">查看更多</Link>}
          >
            <List
              itemLayout="horizontal"
              dataSource={hotArticles}
              renderItem={item => (
                <List.Item
                  actions={[
                    <Space key="actions">
                      <span><LikeOutlined /> {item.likes}</span>
                      <span><CommentOutlined /> {item.comments}</span>
                    </Space>
                  ]}
                >
                  <List.Item.Meta
                    title={<Link to={`/articles/${item.id}`}>{item.title}</Link>}
                    description={
                      <Space>
                        <UserOutlined /> {item.author}
                        {item.tags.map(tag => (
                          <Tag key={tag} color="blue">{tag}</Tag>
                        ))}
                      </Space>
                    }
                  />
                </List.Item>
              )}
            />
          </Card>
        </Col>

        {/* 右侧动态 */}
        <Col span={8}>
          <Card title={<><ClockCircleOutlined /> 最新动态</>}>
            <List
              itemLayout="horizontal"
              dataSource={recentActivities}
              renderItem={item => (
                <List.Item>
                  <List.Item.Meta
                    avatar={
                      item.type === 'article' ? <FileTextOutlined /> :
                      item.type === 'comment' ? <CommentOutlined /> :
                      <LikeOutlined />
                    }
                    title={item.content}
                    description={item.time}
                  />
                </List.Item>
              )}
            />
          </Card>

          {/* 快速入口 */}
          <Card 
            title={<><StarOutlined /> 快速入口</>}
            style={{ marginTop: 24 }}
          >
            <Space direction="vertical" style={{ width: '100%' }}>
              <Button type="primary" block icon={<FileTextOutlined />}>
                <Link to="/articles/new">发布文章</Link>
              </Button>
              <Button block icon={<ReadOutlined />}>
                <Link to="/knowledge-map">知识地图</Link>
              </Button>
              <Button block icon={<StarOutlined />}>
                <Link to="/examples">功能示例</Link>
              </Button>
            </Space>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Home; 